<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>BFC</title>
        <style type="text/css">
            h3 { 
                text-align: center;
            }
           .container {
                overflow: auto;
                width: 80vw;
                border: 2px solid blue;
                margin: auto;
            }

            .first>div {
                float: left;
                height: 50px;
                background: #dfdfdf;
            }

            .left {
                width: 20%;
            }

            div.center {
                width: 50%;
                background: #ffa600;
            }
            
            .right {
                width: 30%;
            }
        </style>
    </head>

    <body>
        <h3>用BFC解决元素高度塌陷问题</h3>
        <div class="container first">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
    </body>
</html>